<!DOCTYPE html>
<html lang="en">

<!--****头部 star****-->
@include('Admin.Public.header')

<body>
<div class="wrapper scrollbar-inner">
	<div class="main-panel">
		<div class="content">
			<div class="page-inner">
				<div class="page-header">
					<h4 class="page-title">数据分析</h4>
				</div>
				<div class="row">
					<div class="col-sm-6 col-md-3">
						<div class="card card-stats card-round">
							<div class="card-body ">
								<div class="row align-items-center">
									<div class="col-icon">
										<div class="icon-big text-center icon-primary bubble-shadow-small">
											<i class="fas fa-users"></i>
										</div>
									</div>
									<div class="col col-stats ml-3 ml-sm-0">
										<div class="numbers">
											<p class="card-category">用户</p>
											<h4 class="card-title">{{$user}}</h4>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-12">
						<div class="card">
							<div class="card-header">
								<div class="card-head-row">
									<div class="card-title">用户统计</div>
								</div>
							</div>
							<div class="card-body">
								<div class="chart-container" style="min-height: 375px">
									<canvas id="statisticsChart"></canvas>
								</div>
								<div id="myChartLegend"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>

@include('Admin.Public.footer')

<script>
	var user_report = JSON.parse(`{!! $user_report !!}`);
    var lineChart = document.getElementById('statisticsChart').getContext('2d');

    var myLineChart = new Chart(lineChart, {
        type: 'line',
        data: {
            labels: user_report.day_list,
            datasets: [{
                label: "用户",
                borderColor: "#1d7af3",
                pointBorderColor: "#FFF",
                pointBackgroundColor: "#1d7af3",
                pointBorderWidth: 2,
                pointHoverRadius: 4,
                pointHoverBorderWidth: 1,
                pointRadius: 4,
                backgroundColor: 'transparent',
                fill: true,
                borderWidth: 2,
                data: user_report.day_list_data
            }]
        },
        options : {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                position: 'bottom',
                labels : {
                    padding: 10,
                    fontColor: '#1d7af3',
                }
            },
            tooltips: {
                bodySpacing: 4,
                mode:"nearest",
                intersect: 0,
                position:"nearest",
                xPadding:10,
                yPadding:10,
                caretPadding:10
            },
            layout:{
                padding:{left:15,right:15,top:15,bottom:15}
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

</body>
</html>